<template>
  <div class="Header">
    <h1>Header</h1>
    <p>{{ count }}</p>
    <p>电影总数是：{{ movieList.length }}</p>
    <button @click="addIncrement">累加</button>
    <button @click="addNincrement(2)">累加N</button>
    <!-- <button @click="addWaitincrement">异步的累加</button> -->
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "Header",
  mounted() {
    //console.log(this);
  },
  //因为取值过于麻烦 使用计算属性 得到值 的方式
  // computed: {
  //   count() {
  //     return this.$store.state.count;
  //   },
  // },
  computed: {
    //mapState用于帮助我们把state中的数据读出来，生成对应的计算属性（又称：映射 state）
    //第一种写法 数组 直接把store的state的数据名称 作为计算属性的名称
    ...mapState(["count", "movieList"]),
    //第二种写法 对象 可以规定计算属性的名称
    // ...mapState({ count: "count" }),
  },
  // mounted() {
  //   //console.log(mapState(["count"]));
  // },
  methods: {
    //可以在组件中使用 this.$store.commit('xxx') 提交 mutation
    // addIncrement() {
    //   //调用 store.commit 方法：store.commit('increment')
    //   this.$store.commit("addIncrement");
    // },
    // addNincrement(n) {
    //   //可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）：
    //   this.$store.commit("addNincrement", n);
    // },
    // addWaitincrement() {
    //   this.$store.commit("addWaitincrement");
    // },

    //使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。
    ...mapMutations(["addIncrement", "addNincrement"]),
  },
};
</script>

<style scoped>
.Header {
  width: 300px;
  margin: 0 auto;
  background-color: cornflowerblue;
}
</style>
